<template>
  <div class="resource-config-list" id="resource-config-warp">
    <a-card :bordered="false" style="width: 100%">
      <div slot="title">
        <a-icon type="left" class="mr10" @click="goBack" />
        <span> {{ title }} </span>
      </div>
      <span slot="extra">
        <a-button type="primary" class="mr10" @click="onEditConfig">编辑</a-button>
      </span>
      <el-table :data="resourceList" :rowKey="(record) => record.resourceId" :loading="isLoading" :pagination="false">
        <el-table-column type="index" label="序号" width="50" :index="indexMethod" align="center">
        </el-table-column>
        <el-table-column prop="resourceId" label="项目" align="center">
        </el-table-column>
        <el-table-column prop="resourceTypeName" label="资源类型" align="center">
        </el-table-column>
        <el-table-column prop="detailSize" label="资源数量" align="center">
        </el-table-column>
      </el-table>
    </a-card>
    <a-modal title="资源编辑" :visible="modalVisible" :confirm-loading="confirmLoading" :getContainer="getContainer"
      :width="650" @ok="editOk" @cancel="editCancel">
      <div>租户/组织: {{ name }}</div>
      <el-transfer :titles="['未选项目', '已选项目']" v-model="transferVal" :data="projectData" />
    </a-modal>
  </div>
</template>

<script>
import { resourceColumns } from "../data";
import { getResourceList, getProjectList, updatePerssion } from "@/services/userManage.js";
import { mapGetters } from "vuex";
import config from './config'
import store from '@/store'

const fromSystem = store.getters['account/fromSystem']
const invitationWays = config[fromSystem] || config['default']

export default {
  name: "resource",
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      modalVisible: false,
      confirmLoading: false,
      resourceColumns,
      isLoading: false,
      // pagination: {
      //   currentPage: 1,
      //   pageSize: 10,
      //   total: 0
      // },
      inviteAppsCopy: [],
      tableData: [],
      inviteApps: [],
      resourceList: [],
      allRoleList: [],
      invitationWays,
      selectOpenId: '',
      transferVal: [],
      projectData: []
    }
  },
  mounted() {
    this.getList();
    this.getProject();
  },
  computed: {
    ...mapGetters("account", ["enterpriseId"]),
    id() {
      return this.$route.query.id;
    },
    roleId() {
      return this.$route.query.roleId || "";
    },
    name() {
      return decodeURIComponent(this.$route.query.name);
    },
    roleName() {
      return decodeURIComponent(this.$route.query.roleName);
    },
    title() {
      let title = "资源配置";
      // roleId 代表 组织身份-- 人员列表入口进入
      if (this.roleId) {
        title = `${this.name} / ${this.roleName} / 资源配置`;
      } else {
        title = `${this.name} / 资源配置`;
      }
      return title;
    }
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    async getList() {
      this.isLoading = true;
      let params = {
        resourceType: 'Vehicle',
        orgType: 'Department',
        orgId: this.id
      };
      try {
        const { data } = await getResourceList(params);
        this.isLoading = false;
        if (data?.code === 0) {
          this.resourceList = data?.data || [];
        }
      } catch (error) {
        this.isLoading = false;
      }
    },
    async getProject() {
      this.isLoading = true;
      try {
        const { data } = await getProjectList();
        this.isLoading = false;
        if (data?.code === 0) {
          const projrct = data?.data || [];
          const newProjrct = []
          projrct.forEach(element => {
            newProjrct.push({
              key: element,
              label: element
            })
          });
          this.projectData = newProjrct
        }
      } catch (error) {
        this.isLoading = false;
      }
    },
    onEditConfig() {
      const valArr = []
      this.resourceList.forEach(element => {
        valArr.push(element.resourceId)
      });
      this.$set(this, 'transferVal', valArr)
      this.modalVisible = true;
    },
    // 编辑
    async editOk() {
      this.isLoading = true;
      let params = {
        resourceType: 'Vehicle',
        orgType: 'Department',
        orgId: this.id,
        resIds: this.transferVal
      };
      try {
        const { data } = await updatePerssion(params);
        if (data?.code === 0) {
          this.getList()
        }
        this.isLoading = false;
      } catch (error) {
        this.isLoading = false;
      }
      this.modalVisible = false;
    },
    // 取消
    editCancel() {
      this.modalVisible = false;
    },
    goBack() {
      if (this.roleId) {
        this.$router.go(-1)
      } else {
        this.$router.go(-1)
      }
    },
    getContainer() {
      return document.querySelector('#resource-config-warp')
    }
  }
};
</script>

<style lang="less" scoped>
.resource-config-list {
  ::v-deep .ant-card-head-title {
    font-weight: 600;
    padding: 12px 0;
    font-size: 18px;
  }

  ::v-deep .el-transfer .el-button {
    padding: 0 20px;
  }

  ::v-deep .el-table thead tr th {
    background: #fafafa !important;
  }
}
</style>
